<template>
  <div class="my-listings">
    <el-row :gutter="30">
      <el-col 
        v-for="item in items" 
        :key="item.id"
        :xs="40"
        :sm="24"
        :md="12"
        :lg="12"
        class="listing-item-col"
      >
        <el-card class="listing-item" :body-style="{ padding: '0px' }">
          <div class="item-image" @click="$emit('view-details', item)">
            <el-image :src="item.image" fit="scale-down">
              <template #error>
                <div class="image-error">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
            <div class="item-rarity" :style="{ background: getRarityColor(item.rarity) }">
              {{ item.rarity }}
            </div>
            <div class="item-status">已上架</div>
          </div>
          <div class="item-content">
            <h3 class="item-name" @click="$emit('view-details', item)">{{ item.name }}</h3>
            <div class="item-price">
              <span class="price-label">售价</span>
              <span class="price-value">{{ formatPrice(item.price) }} ETH</span>
            </div>
            <!-- <div class="item-time">
              <span class="time-label">上架时间</span>
              <span class="time-value">{{ formatTime(item.listTime) }}</span>
            </div> -->
            <div class="item-actions">
              <el-button 
                type="danger" 
                @click="$emit('cancel', item)"
                class="action-button"
              >
                取消上架
              </el-button>
              <el-button 
                type="default" 
                @click="$emit('view-details', item)"
                class="action-button"
              >
                查看详情
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 空状态 -->
    <el-empty
      v-if="items.length === 0"
      description="暂无上架宝藏"
    >
      <template #image>
        <el-icon :size="60" color="#909399"><Sell /></el-icon>
      </template>
      <template #description>
        <p>你还没有上架任何宝藏</p>
        <p class="empty-tip">可以在市场列表中选择你的宝藏进行上架</p>
      </template>
    </el-empty>
  </div>
</template>

<script setup>
import { Picture, Sell } from '@element-plus/icons-vue';

// 接收父组件传递的数据
defineProps({
  items: {
    type: Array,
    required: true
  }
});

// 定义事件
defineEmits(['cancel', 'view-details']);

// 格式化价格显示
const formatPrice = (price) => {
  return Number(price).toFixed(2);
};

// 格式化时间显示
const formatTime = (timestamp) => {
  const date = new Date(timestamp * 1000);
  const now = new Date();
  const diff = Math.floor((now - date) / 1000);

  if (diff < 60) {
    return '刚刚';
  } else if (diff < 3600) {
    return `${Math.floor(diff / 60)}分钟前`;
  } else if (diff < 86400) {
    return `${Math.floor(diff / 3600)}小时前`;
  } else {
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
  }
};

// 获取稀有度颜色
const getRarityColor = (rarity) => {
  switch (rarity) {
    case 'Legendary': return 'linear-gradient(135deg, #FFD700, #FFA500)';
    case 'Epic': return 'linear-gradient(135deg, #9932CC, #800080)';
    case 'Rare': return 'linear-gradient(135deg, #0066CC, #000080)';
    case 'Common': return 'linear-gradient(135deg, #32CD32, #006400)';
    default: return 'linear-gradient(135deg, #808080, #404040)';
  }
};
</script>

<style scoped>
.my-listings {
  margin-top: 20px;
  padding: 0 15px;
}

.listing-item-col {
  margin-bottom: 30px;
  padding: 0 15px;
  min-width: 400px;
}

.listing-item {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 400px;
}

.listing-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.item-image {
  position: relative;
  width: 100%;
  height: 180px;
  cursor: pointer;
}

.item-image :deep(.el-image) {
  width: 100%;
  height: 100%;
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  color: #909399;
  font-size: 24px;
}

.item-rarity {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.item-status {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(64, 158, 255, 0.9);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.item-content {
  padding: 15px 15px 0 15px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.item-name {
  margin: 0 0 10px;
  font-size: 16px;
  color: #303133;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-name:hover {
  color: #409EFF;
}

.item-price,
.item-time {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-label,
.time-label {
  color: #909399;
  font-size: 14px;
}

.price-value {
  color: #409EFF;
  font-weight: bold;
  font-size: 16px;
}

.time-value {
  color: #606266;
  font-size: 14px;
}

.item-actions {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin: 15px 0;
  padding: 0 15px;
}

.action-button {
  flex: 1;
  max-width: 45%;
}

.empty-tip {
  color: #909399;
  font-size: 14px;
  margin-top: 8px;
}
</style> 